<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>折线图</title>
  <link rel="stylesheet " type="text/css " href="css/globle.css " />
  <link rel="stylesheet " type="text/css " href="css/style.css " />
  <script src='js/jquery-2.0.3.js'></script>
  <style type="text/css">
  #main {
    width: 800px;
    height: 300px;
    margin: 50px auto;
  }
  </style>
  <!-- Echarts js -->
  <script src="source/echarts-all.js"></script>
</head>

<body>
  <div id="main"></div>
</body>

</html>
<script type="text/javascript">
$(function() {
  // 图表实例化------------------
  // srcipt标签式引入
  var myChart = echarts.init(document.getElementById('main'));

  // 过渡---------------------
  myChart.showLoading({
    text: '正在努力的读取数据中...', //loading话术
  });

  // ajax getting data...............

  // ajax callback
  myChart.hideLoading();


  // 配置图表显示
  var option = {
    title: {
      text: '某楼盘销售情况',
      subtext: '纯属虚构'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['意向', '预购', '成交']
    },
    toolbox: {
      show: true,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    // 是否启用拖拽重计算特性
    calculable: true,
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: '成交',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          }
        }
      },
      data: [10, 12, 21, 54, 260, 830, 710]
    }, {
      name: '预购',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          }
        }
      },
      data: [30, 182, 434, 791, 390, 30, 10]
    }, {
      name: '意向',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          }
        }
      },
      data: [1320, 1132, 601, 234, 120, 90, 20]
    }]
  };


  // 为echarts对象加载数据
  myChart.setOption(option);


})
</script>
